// import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/experiment1/example01',
    component: () => import('@/views/experiment1/Example01View.vue')
  },
  {
    path: '/experiment1/example02',
    component: () => import('@/views/experiment1/Example02View.vue')
  },
  {
    path: '/experiment1/example03',
    component: () => import('@/views/experiment1/Example03View.vue')
  },
  {
    path: '/experiment2',
    component: () => import('@/views/experiment2/SelectCoursesView.vue')
  },
  {
    path: '/experiment3',
    component: () => import('@/views/experiment3/HomeView.vue'),
    children: [
      {
        path: 'location',
        component: () => import('@/views/experiment3/LocationView.vue')
      },
      {
        name: 'foods',
        path: 'foods',
        component: () => import('@/views/experiment3/FoodsView.vue')
      },
      {
        path: 'shops/:sid',
        component: () => import('@/views/experiment3/ShopView.vue')
      },
      {
        path: 'orders',
        component: () => import('@/views/experiment3/OrderView.vue')
      }
    ]
  },
  {
    path: '/experiment4',
    component: () => import('@/views/experiment4/LoginView.vue')
  }
]

const router = createRouter({
  //history:
  // 这是一个对象，用于配置路由模式。Vue Router 提供了两种模式：hash 和 history。
  // createWebHashHistory(): 使用这种模式时，URL 中会包含一个 # 符号。这种模式不需要服务器进行任何特殊配置，因为它不会真正改变页面的 URL。这是 Vue Router 的默认模式，如果你不提供 history 配置，那么默认会使用它。
  // createWebHistory(import.meta.env.BASE_URL): 使用这种模式时，URL 会看起来更“干净”，没有 # 符号。但它需要服务器进行特殊配置，以便在客户端导航到新的路由时返回正确的页面。import.meta.env.BASE_URL 是 Vite 或 Vue CLI 提供的，代表应用的基础 URL。
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(),
  routes: routes
})

export default router
